<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>车辆列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="resources/layui/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="车牌号码" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addCars_btn">添加车辆</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
        </form>
    </blockquote>
    <table id="carsList" lay-filter="carsList"></table>

    <!--操作-->
    <script type="text/html" id="carsListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">详情</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="picManager">图片管理</a>
    </script>
</form>
<script type="text/javascript" src="resources/layui/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['form','layer','laydate','table','laytpl'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;
        //车辆列表
        var tableIns = table.render({
            elem: '#carsList',
            url : 'cars',
            page : true,
            height : "full-125",
            limit : 20,
            limits : [10,15,20,25],
            id : "carsListTable",
            cols : [[
                {type: "checkbox", fixed:"left"},
                {field: 'car_no', title: '车牌号码',align:"center"},
                {field: 'car_brand', title: '车辆品牌',align:"center",templet:function (row) {
                         return row.car_brand.name;
                }},
                {field: 'car_model', title: '车辆型号',align:"center",templet:function (row) {
                        return row.car_model.name;
                    }},
                {field: 'car_color', title: '车辆颜色',align:"center",templet:function (row) {
                    if(row.car_color==null){
                        return "";
                        }
                        return row.car_color.name;
                    }},
                // {field: 'car_load', title: '载重', align:"center"},
                {field: 'car_seats', title: '座位数', align:"center"},
                // {field: 'oil_wear', title: '油耗', align:"center"},
                // {field: 'teinit_mill', title: '初始里程', align:"center"},
                // {field: 'maintain_mil', title: '保养里程', align:"center"},
                // {field: 'maintain_period', title: '保养周期', align:"center"},
                // {field: 'engine_num', title: '发动机号', align:"center"},
                // {field: 'frame_num', title: '车架号', align:"center"},
                // {field: 'sup_id', title: '供应商ID',align:"center",templet:function (row) {
                //         return row.sup_id.name;
                //     }},
                // {field: 'purchase_price', title: '购买价格', align:"center"},
                // {field: 'purchase_date', title: '购买日期', align:"center"},
                {field: 'dept_id', title: '部门ID',align:"center",templet:function (row) {
                        return row.dept_id.name;
                    }},
                {field: 'car_state', title: '状态',align:"center",templet:function (row) {
                        return row.car_state.name;
                    }},
                // {field: 'remarks', title: '备注', align:"center"},
                {field: 'able', title: '是否启用',align:"center",templet:function (row) {
                        return row.able=="1"?"启用":"禁用";
                    }},
                {title: '操作', width:250, templet:'#carsListBar',fixed:"right",align:"center"}
            ]]
        });
        $(".search_btn").on("click",function(){
            table.reload("carsListTable",{
                page: {
                    page: 1 //重新从第 1 页开始
                },
                where: {
                    car_no: $(".searchVal").val()  //搜索的关键字
                }
            })
        });
        table.on("tool(carsList)",function (obj) {
            //获取当前行的数据
            var data=obj.data;
            switch (obj.event){
                case 'del':
                    deleteCar(data);
                    break;
                case 'edit':
                    editCar(data);
                    break;
                case 'picManager':
                    picManager(data);
                    break;
                case 'look':
                    look(data);
                    break;
            }
        });
        //进入图片管理的页面
        function picManager(data){
            var index=layui.layer.open({
                title:"车辆图片信息",
                type:2,
                content:"toCarPicPage.do",
                success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    var id = body.contents().find("#id");
                    body.contents().find("#id").val(data.id);
                }
            });
            //全屏打开窗口
            layui.layer.full(index);
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        }

        //单击添加用户按钮
        $(".addCars_btn").click(function () {
            var index=layui.layer.open({
                title:"添加车辆",
                type:2,
                content:"toCarAddPage.do",
                success : function(layero, index){
                    // var body = layui.layer.getChildFrame('body', index);
                }
            });
            //全屏打开窗口
            layui.layer.full(index);
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        });
        function look(data) {
            var index=layui.layer.open({
                title:"车辆详细",
                type:2,
                area:['500px','500px'],
                content:"/toCarDetailPage.do",
                success:function (layero,index) {
                    var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    body.contents().find("#id").val(data.id);
                    var carbrand;
                    var carbrandId = data.car_brand.id;
                    $.ajax({
                        url:'/car/carbrand',
                        success:function (data) {
                            carbrand += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carbrandId==data[i].id){
                                    carbrand += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carbrand += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_brandText").append(carbrand)
                        }
                    });
                    var carmodel;
                    var car_brandText=data.car_brand.id;
                    var carmodelId=data.car_model.id;
                    $.ajax({
                        url:'/car/carmodel/'+car_brandText,
                        success:function (data) {
                            carmodel += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carmodelId==data[i].id){
                                    carmodel += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carmodel += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_modelText").append(carmodel)
                        }
                    });
                    var carcolor;
                    var carcolorId = data.car_color.id;
                    $.ajax({
                        url:'/car/carcolor',
                        success:function (data) {
                            carcolor += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carcolorId==data[i].id){
                                    carcolor += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carcolor += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_colorText").append(carcolor)
                        }
                    });
                    var supid;
                    var supidId = data.sup_id.id;
                    $.ajax({
                        url:'/car/supid',
                        success:function (data) {
                            supid += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(supidId==data[i].id){
                                    supid += ("<option value='" + data[i].id + "' selected>" + data[i].unit_name + "</option>")
                                }else{
                                    supid += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#sup_idText").append(supid)
                        }
                    });
                    var deptid;
                    var deptidId = data.dept_id.id;
                    $.ajax({
                        url:'/car/deptid',
                        success:function (data) {
                            deptid += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(deptidId==data[i].id){
                                    deptid += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    deptid += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#dept_idText").append(deptid)
                        }
                    });
                    var carstate;
                    var carstateId = data.car_state.id;
                    $.ajax({
                        url:'/car/carstate',
                        success:function (data) {
                            carstate += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carstateId==data[i].id){
                                    carstate += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carstate += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_stateText").append(carstate)
                        }
                    });
                    body.contents().find(".car_no").val(data.car_no);
                    body.contents().find(".car_load").val(data.car_load);
                    body.contents().find(".car_seats").val(data.car_seats);
                    body.contents().find(".oil_wear").val(data.oil_wear);
                    body.contents().find(".init_mil").val(data.init_mil);
                    body.contents().find(".maintain_mil").val(data.maintain_mil);
                    body.contents().find(".maintain_period").val(data.maintain_period);
                    body.contents().find(".engine_num").val(data.engine_num);
                    body.contents().find(".frame_num").val(data.frame_num);
                    body.contents().find(".purchase_price").val(data.purchase_price);
                    body.contents().find(".purchase_date").val(data.purchase_date);
                    body.contents().find(".remarks").val(data.remarks);
                    body.contents().find("input[name='able'][value='"+data.able+"']").prop("checked", true);
                }
            })
        }
        //进入用户的编辑页面
        function editCar(data){
            var index=layui.layer.open({
                title:"编辑车辆",
                type:2,
                content:"toCarEditPage.do",
                success:function (layero,index) {
                    var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    body.contents().find("#id").val(data.id);
                    var carbrand;
                    var carbrandId = data.car_brand.id;
                    $.ajax({
                        url:'/car/carbrand',
                        success:function (data) {
                            carbrand += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carbrandId==data[i].id){
                                    carbrand += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carbrand += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_brandText").append(carbrand)
                        }
                    });
                    var carmodel;
                    var car_brandText=data.car_brand.id;
                    var carmodelId=data.car_model.id;
                    $.ajax({
                        url:'/car/carmodel/'+car_brandText,
                        success:function (data) {
                            carmodel += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carmodelId==data[i].id){
                                    carmodel += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carmodel += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_modelText").append(carmodel)
                        }
                    });
                    var carcolor;
                    var carcolorId = data.car_color.id;
                    $.ajax({
                        url:'/car/carcolor',
                        success:function (data) {
                            carcolor += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carcolorId==data[i].id){
                                    carcolor += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carcolor += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_colorText").append(carcolor)
                        }
                    });
                    var supid;
                    var supidId = data.sup_id.id;
                    $.ajax({
                        url:'/car/supid',
                        success:function (data) {
                            supid += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(supidId==data[i].id){
                                    supid += ("<option value='" + data[i].id + "' selected>" + data[i].unit_name + "</option>")
                                }else{
                                    supid += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#sup_idText").append(supid)
                        }
                    });
                    var deptid;
                    var deptidId = data.dept_id.id;
                    $.ajax({
                        url:'/car/deptid',
                        success:function (data) {
                            deptid += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(deptidId==data[i].id){
                                    deptid += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    deptid += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#dept_idText").append(deptid)
                        }
                    });
                    var carstate;
                    var carstateId = data.car_state.id;
                    $.ajax({
                        url:'/car/carstate',
                        success:function (data) {
                            carstate += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carstateId==data[i].id){
                                    carstate += ("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>")
                                }else{
                                    carstate += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }
                            }
                            body.contents().find("#car_stateText").append(carstate)
                        }
                    });
                    body.contents().find(".car_no").val(data.car_no);
                    body.contents().find(".car_load").val(data.car_load);
                    body.contents().find(".car_seats").val(data.car_seats);
                    body.contents().find(".oil_wear").val(data.oil_wear);
                    body.contents().find(".init_mil").val(data.init_mil);
                    body.contents().find(".maintain_mil").val(data.maintain_mil);
                    body.contents().find(".maintain_period").val(data.maintain_period);
                    body.contents().find(".engine_num").val(data.engine_num);
                    body.contents().find(".frame_num").val(data.frame_num);
                    body.contents().find(".purchase_price").val(data.purchase_price);
                    body.contents().find(".purchase_date").val(data.purchase_date);
                    body.contents().find(".remarks").val(data.remarks);
                    body.contents().find("input[name='able'][value='"+data.able+"']").prop("checked", true);
                }
            });
            layui.layer.full(index);//全屏显示
        }
        function findDictionary(data){

        }
        //完成删除
        function deleteCar(data){
            $.ajax({
                url:"car/"+data.id,
                type:"GET",
                dataType:"json",
                success:function (res) {
                    if(res.code==3007){
                        tableIns.reload();//重新刷新表格
                        layer.msg(res.msg);
                    }
                }
            });
        }
        //完成批量删除
        //批量删除
        $(".delAll_btn").click(function () {

            var checkStatus = table.checkStatus('carsListTable');
            var data = checkStatus.data;
            var Ids = [];
            if(data.length > 0) {
                for (var i in data) {
                    Ids.push(data[i].id);
                }
                layer.confirm('确定删除选中的车辆？', {icon: 3, title: '提示信息'}, function (index) {
                    /*
                    $.get("/sys/deleteBatchUser.html",{ids:uIds},function (res) {
                        tableIns.reload();
                        layer.close(index);
                    });
                    */
                    $.ajax({
                        url:"car/deleteBatch",
                        type:"GET",
                        data:{ids:Ids},
                        dataType:"json",
                        success:function (res) {
                            if(res.code==3007){
                                layer.close(index);
                                tableIns.reload();
                                layer.msg(res.msg);
                            }
                        }
                    });
                })
            }else{
                layer.msg("请选择需要删除的车辆");
            }
        });



    })

</script>
</body>
</html>